<script setup>
import { ElMessage } from "element-plus";

const props = defineProps({
  content: {
    required: true
  },
  title: {
    type: String,
    required: true
  },
  confirm: {
    type: String,
    required: true
  },
  cancel: {
    type: String,
    required: true
  },
  visible: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:visible']);

const fn_confirm = () => {
  ElMessage({
    showClose: true,
    message: '已确定',
    type: 'success',
  });
  handleClose();
}

const fn_cancel = () => {
  ElMessage({
    showClose: true,
    plain: true,
    message: '已取消',
    type: 'warning'
  });
  handleClose();
}

// 定义关闭组件的方法
const handleClose = () => {
  emit('update:visible', false);
}
</script>

<template>
  <div v-show="visible" class="alert-container">
    <div class="overlay" @click="handleClose"></div>
    <div class="alert-box">
      <div class="header">
        <span class="icon">
          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path clip-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z" fill-rule="evenodd"/>
          </svg>
        </span>
        <p class="title">{{ title }}</p>
      </div>
      <!-- 使用插槽显示内容 -->
      <div class="message">
        <slot :content="content"></slot>
      </div>
      <div class="actions">
        <button class="btn-confirm" @click="fn_confirm">{{ confirm }}</button>
        <button class="btn-cancel" @click="fn_cancel">{{ cancel }}</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.alert-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05); /* 半透明背景 */
  z-index: 1000000; /* 设置一个较大的 z-index */
}

.alert-box {
  position: relative; /* 相对定位，使 z-index 生效 */
  z-index: 2147483647; /* 比遮盖层更高的 z-index */
  width: 300px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}

.header {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.message {
  margin-top: 10px;
  font-size: 16px;
}

.actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.btn-confirm,
.btn-cancel {
  padding: 8px 16px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-confirm {
  background-color: #007bff;
  color: white;
}

.btn-cancel {
  background-color: #ced4da;
  color: black;
}
</style>